<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>BIRT Chart Javascript extension API viewer</title>
<script type="text/javascript" src="js/chartAjaxAPI.js"></script>
<script type="text/javascript">
var jsCode;
function generateChart()
{
	var width = document.getElementById("width").value;
	var height = document.getElementById("height").value;	
	var cm = new ChartModel( width, height);
	jsCode = "var cm = new ChartModel ("+width+","+height+");\n";

	var chartType = document.getElementById("type").value;
	cm.setType(chartType);
	jsCode += "cm.setType('"+chartType+"');\n";

	var chartFormat = document.getElementById("format").value;
	cm.setFormat(chartFormat);
	jsCode += "cm.setFormat('"+chartFormat+"');\n";

	var chartDimension = document.getElementById("dimension").value;
	cm.setDimension(chartDimension);
	jsCode += "cm.setDimension('"+chartDimension+"');\n";

	var bStacked = document.getElementById("stacked").value;
	cm.setStacked(bStacked);
	jsCode += "cm.setStacked("+bStacked+");\n";

	var bColorByCategory = document.getElementById("colorByCategory").value;
	cm.setColorByCategory(bColorByCategory);
	jsCode += "cm.setColorByCategory("+bColorByCategory+");\n";

	var bShowLabel = document.getElementById("showLabel").value;
	cm.setShowLabel(bShowLabel);
	jsCode += "cm.setShowLabel("+bShowLabel+");\n";

	var bShowLegend = document.getElementById("showLegend").value;
	cm.setShowLegend(bShowLegend);
	jsCode += "cm.setShowLegend("+bShowLegend+");\n";

	var chartTitle = document.getElementById("title").value;
	cm.setTitle(chartTitle);
	jsCode += "cm.setTitle('"+chartTitle+"');\n";

	var categories = document.getElementById("categories").value;
	cm.setCategories(categories);
	jsCode += "cm.setCategories('"+categories+"');\n";

	var datasets = document.getElementById("sets").value;
	cm.setValues(datasets);
	jsCode += "cm.setValues('"+datasets+"');\n";

	var chart = new BirtChart();
	chart.setDataXML(cm);		
	chart.render("chartDiv");
	jsCode += "\nvar chart = new BirtChart();\n";
	jsCode += "chart.setDataXML(cm);\n";
	jsCode += "chart.render(\"chartDiv\");";
	updateInnerText("jsContent", jsCode);
	updateInnerText("xmlContent", cm.getXML().replace(/>/g,">\n"));
	updateInnerText("xmlHead", "Generated XML");
}

function readFileViaApplet() {
	var url = document.form1.dataxmls.value;
	url = url.replace(/\/\//g,"/");
	document.getElementById("url").value=url;
	document.ReadURL.readFile(document.form1.dataxmls.value);
	showFileContent();
}

function showFileContent() {
	if (document.ReadURL.finished==0) {
		window.setTimeout(showFileContent,200);
		return;
	}
	
	var chart = new BirtChart("");
	chart.setDataURL(document.form1.dataxmls.value);
	chart.render("chartDiv");

	jsCode = "var chart = new BirtChart(\"\");\n";
	jsCode += "chart.setDataURL(\"" + document.getElementById("url").value + "\");\n";
	jsCode += "chart.render(\"chartDiv\");";
	updateInnerText("jsContent", jsCode);
	updateInnerText("xmlContent", document.ReadURL.fileContent);
	updateInnerText("xmlHead", "XML content in file: "+document.getElementById("url").value);
}

function updateInnerText(objId,str)
{
	if(document.all){
		// IE
		document.getElementById(objId).innerText = str;
	} else{
		// Firefox
		document.getElementById(objId).textContent = str;
	}
}
</script>
</head>
<body onload="generateChart()">
<h1>BIRT Chart Javascript extension API viewer</h1>
<applet name=ReadURL code=applets.ReadURL width=1 height=1> </applet>
<form name=form1>Choose a data XML file: <select name="dataxmls"
	onChange="if(this.selectedIndex!=0){readFileViaApplet();}">
	<option value="choose">Choose a file...
	<option value="xmls//StackedTubeChart.xml">Stacked Tube Chart
	<option value="xmls//SidePyramidChart.xml">Pyramid Chart
	<option value="xmls//3DBarChart.xml">3D Bar Chart
	<option value="xmls//PieChart.xml">Pie Chart
	<option value="xmls//ChartScripting.xml">Chart Scripting
	<option value="xmls//ChartInteractivity.xml">Chart Interactivity
</select> <input type="text" size="100" id="url" value=""></form>
<p />Or use following settings: <br />
Type: <select id="type">
	<option value="bar">Bar</option>
	<option value="pyramid">Pyramid</option>
	<option value="tube">Tube</option>
	<option value="cone">Cone</option>
	<option value="line">Line</option>
	<option value="area">Area</option>
	<option value="scatter">Scatter</option>
	<option value="pie">Pie</option>
</select> Dimension: <select id="dimension">
	<option value="2d">2D</option>
	<option value="2.5d">2.5D</option>
	<option value="3d">3D</option>
</select> Format: <select id="format">
	<option value="svg">SVG</option>
	<option value="png">PNG</option>
	<option value="jpg">JPG</option>
	<option value="gif">GIF</option>
	<option value="bmp">BMP</option>
</select> Title: <input type="text" size="20" id="title" value="BIRT Chart js API sample">
<br />
Stacked: <select id="stacked">
	<option value="false">false</option>
	<option value="true">true</option>
</select> Color By Category: <select id="colorByCategory">
	<option value="true">true</option>
	<option value="false">false</option>
</select> Show Legend: <select id="showLegend">
	<option value="true">true</option>
	<option value="false">false</option>
</select> Show Label: <select id="showLabel">
	<option value="true">true</option>
	<option value="false">false</option>
</select> <br />
Width: <input type="text" size="20" id="width" value="400">
Height: <input type="text" size="20" id="height" value="300"> <br />
Data Categories: <input type="text" id="categories" size="100"
	value="MSFT,ACTU,JAVA,GOOGLE,IBM"> <br />
Data Sets: <input type="text" id="sets" size="100" value="5,4,8,2,6">
<br />
<input type="button" value="Display" onclick="generateChart()">
<p />
<table border="1">
	<tr>
		<td>Generated Chart</td>
		<td width="30%">Javascript</td>
		<td width="40%"><div id="xmlHead">Generated XML</div></td>
	</tr>
	<tr>
		<td valign="top">
		<div id="chartDiv"></div>
		</td>
		<td valign="top">
		<div id="jsContent"></div>
		</td>
		<td valign="top">
		<div id="xmlContent"></div>
		</td>
	</tr>
</table>
</body>
</html>